import api from '@/api'
import React, { useEffect, useState } from 'react'
import {Table,Image,Space,Button,Pagination} from 'antd'

export default function UserList() {
    const [query,setQuery]=useState({
        type:'',
        value:'',
        pageSize:10,
        currentPage:1
    })
    const [pageBean,setPageBean]=useState({
        total:0,
        pages:0,
        result:[]
    })
    const getUsesApi=async(params:any)=>{
        let result=await api.users.getUsers(params)
        console.log('result',result.data.data);
        setPageBean(result.data.data)
    }
    useEffect(()=>{
        getUsesApi(query)
    },[])
    let columns=[
        {
          title:'电话',
          key:'phone',
          dataIndex:'phone'
        },
        {
          title:'用户名',
          dataIndex:'username'
        },
        {
            title:'密码',
            dataIndex:'password'
        },
        {
            title:'邮箱',
            dataIndex:'email'
        },
        {
            title:'图像',
            dataIndex:'image',
            render:(arg:any)=>{
                return <Image width={50} src={arg}></Image>
            }
        },
        {
            title:'角色',
            dataIndex:'auth',
            render:(arg:any)=>{
                return arg==1?'超级管理员':'普通管理员'
            }
        },
        {
            title:'操作',
            key:'action',
            render:(arg:any)=>{
                return <Space>
                    <Button type='primary' size="small">修改</Button>
                </Space>
            }
        }
      ]
     //页面改变的方法
      const pageChangeHandle=(current:number,pagesize:number)=>{
        getUsesApi({...query,currentPage:current,pageSize:pagesize})
        setQuery({...query,currentPage:current,pageSize:pagesize})        
      }
      //当pageSize发生变化的时候触发
      const sizeChangeHandle=(current:number,pagesize:number)=>{
         getUsesApi({...query,pageSize:pagesize,currentPage:current})
      }
    return (
    <div>
        <Table columns={columns} dataSource={pageBean.result} rowKey={"_id"} pagination={false}></Table>
        <Pagination current={query.currentPage} 
            total={pageBean.total} 
            pageSize={query.pageSize}
            onChange={pageChangeHandle}
            showSizeChanger={true}
            pageSizeOptions={[3,5,10,15,20]}
            onShowSizeChange={sizeChangeHandle}
  />
    </div>
  )
}
